<script>
import { register } from 'api/user'

export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        phone: '',
        password: '',
        sex: 1
      },
      dlbox: require('@/assets/images/dlbox.svg'),
      type: 'login' // login or register
    }
  },
  methods: {
    onToChangeUserOp() {
      this.type = this.type === 'login' ? 'register' : 'login'
    },
    async submit() {
      const { username, phone, password } = this.form
      console.log('==========', this.form)
      if (this.type === 'login') {
        if (!phone || !password) {
          this.$message({
            message: '请输入手机号码和密码',
            type: 'warning'
          })
          return
        }
        this.$store.dispatch('user/login', this.form).then(() => {
          this.$message({
            type: 'success',
            message: '登录成功'
          })
          this.$router.push({ path: '/' })
        })
      } else {
        if (!username || !password || !phone) {
          this.$message({
            message: '请检查信息'
          })
          return
        }
        const res = await register(this.form)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '注册成功'
          })
          this.type = 'login'
        }
      }
    }
  }
}
</script>

<template>
  <body
    class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dlbox"
  >
    <div
      class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1"
    >
      <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
        <div class="mt-12 flex flex-col items-center">
          <h1 class="text-2xl xl:text-3xl font-extrabold">
            用户{{ type === "login" ? "登录" : "注册" }}
          </h1>
          <div class="w-full flex-1 mt-8">
            <div class="mx-auto max-w-xs">
              <input
                v-if="type === 'register'"
                v-model="form.username"
                class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                type="username"
                placeholder="请输入用户名"
              >
              <div class="w-full mt-5">
                <el-radio-group v-if="type === 'register'" v-model="form.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="0">女</el-radio>
                </el-radio-group>
              </div>
              <input
                v-model="form.phone"
                class="w-full mt-5 px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                type="phone"
                placeholder="请输入手机号码"
              >
              <input
                v-model="form.password"
                class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                type="password"
                placeholder="请输入密码"
              >

              <div
                class="text-xs mt-1 text-right font-extrabold"
                @click="onToChangeUserOp"
              >
                用户{{ type === "login" ? "注册" : "登录" }}
              </div>

              <button
                class="mt-2 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
                @click="submit"
              >
                <span class="ml-3">{{
                  type === "login" ? "登  录" : "注  册"
                }}</span>
              </button>
              <!--              <button-->
              <!--                class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"-->
              <!--              >-->
              <!--                <span class="ml-3">注 册</span>-->
              <!--              </button>-->
              <p class="mt-6 text-xs text-gray-600 text-center">
                我同意并遵守服务协议
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
        <div
          class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
          :style="{ backgroundImage: `url(${dlbox})` }"
        />
      </div>
    </div>
  </body>
</template>

<style scoped lang="scss">
.dlbox .weixin,
.dlbox .weibo {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: cover;
}

.dlbox .weixin {
  background-image: url("../assets/images/weixin.png");
}

.dlbox .weibo {
  background-image: url("../assets/images/weibo.png");
}
.bg-indigo-100 {
  background-color: #ebf4ff;
}
.border-gray-200 {
  border-color: #edf2f7;
}
.bg-gray-100 {
  background-color: #f7fafc;
}
.bg-indigo-500 {
  background-color: #667eea;
}
</style>
